<template>
  <div class="allCheck">
    <!-- 头部开始 -->
    <div class="statusHead">
      <!-- 单选按钮 查询开始 -->
       <div class="checkStatus">
            <span class="statusInfo">审核状态：</span>
            <div class="statusBox"> 
              <el-radio-group v-model="radioCheck" @change="choseStatus" class="radioCheck">
                <el-radio :label="3">全部</el-radio>
                <el-radio :label="1">已通过</el-radio>
                <el-radio :label="0">未通过</el-radio>
                <el-radio :label="2">未审核</el-radio>
              </el-radio-group>   
      </div> 
    </div>
      <!-- 查询结束 -->
       <!-- 导出按钮开始 -->
       <div class="exportBtn">
          <el-button type="primary" @click="exportData">导出到excel</el-button>
       </div>
  
    </div>
    <!-- 头部结束 -->

    <!-- 列表数据开始 -->

    <div class="checkListS">
        <el-table
    :data="checkData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="order_number"
      label="订单编号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="order_quantity"
      label="订单数量"
      width="120">
    </el-table-column>
    <el-table-column
      prop="name"
      label="大客户专员姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="company"
      label="单位名称"
      width="120">
    </el-table-column>
    <el-table-column
      prop="create_time"
      label="创建时间"
      width="300">
    </el-table-column>
    <el-table-column 
      label="单价"
      width="120">
      <template slot-scope="scope">
        <span v-if="scope.row.product_name=='年卡'">{{singlePrice
          }}</span>
         <span v-else>{{singlePrice1}}</span> 
      </template>
    </el-table-column>
    <el-table-column
      label="支付金额"
      width="120">
      <template slot-scope="scope">
          <span v-if="scope.row.product_name=='年卡'">{{totalPrices}}</span>
          <span v-else>{{totalPrice1}}</span>
        </template>
    </el-table-column>
    <el-table-column
      prop="order_status"
      label="审核状态"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="200">
      <template slot-scope="scope">
        <el-button type="primary" @click="passResult(scope.row)">通过</el-button>
         <el-button type="danger" @click="noPassResult(scope.row)">未通过</el-button>
      </template>
    </el-table-column>
  </el-table>
    </div>
    <!-- 列表数据 结束 -->
    


    <!-- 分页器开始 -->
     <div class="pagatations">

       <div class="block"> 
    <el-pagination
     :page-size="4"
      :current-page.sync="currentPage"
      :page-sizes="[4, 8]"
      layout="total,sizes,prev,pager,next,jumper"
      :hide-on-single-page="false"
      :total="total"
      @size-change="sizeChange">
    </el-pagination>
  </div>
    </div>
  </div>
</template>

<script>
import {checkOrderListApi} from "../../api/checkOrder"
import {orderListApi } from "../../api/orderlist" 
import {checkStatusApi} from "../../api/checkOrder"
export default {
  methods: {
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
       handleClick(row) {
        console.log(row);
      },
      showAll(){ 
        orderListApi.getAllOrder().then((res) =>{
        this.checkData = res.res; 
        for(let i = 0;i<res.res.length;i++){
           this.totalPrices = res.res[i].order_quantity * this.singlePrice
           this.totalPrice1 = res.res[i].order_quantity * this.singlePrice1
         } 
         this.total = res.res.length;
        })
         
      },
      choseStatus(){
        console.log(this.radioCheck);
         checkOrderListApi.getOrderStatus({status:this.radioCheck}).then((res)=>{
           this.checkData = res.res
         })
         if(this.radioCheck == 3){
           this.showAll()
           console.log(11111);
         }
      },
      passResult(val){
        console.log(val.order_number);

        checkOrderListApi.getCheckOrder({order_number:val.order_number,keyword:1}).then((res) =>{
           console.log(res);
        })
        
      },
      noPassResult(val){
        console.log(val.order_number);
        checkOrderListApi.getCheckOrder({order_number:val.order_number,keyword:0}).then((res) =>{
           console.log(res);
        })
      },
       sizeChange(val) {
      this.pageSize = val;
    },
       exportData(){
        console.log("hahah");
        this.excelData = this.checkData; //将你要导出的数组数据（historyList）赋值给excelDate
        this.export2Excel(); //调用export2Excel函数，填写表头（clomns里的type）和对应字段(historyList里的属性名)
      },
          export2Excel() {
      var that = this;
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/excel/export2Excel");
        //这里使用绝对路径( @表示src文件夹 )，使用@/+存放export2Excel的路径【也可以写成相对于你当前"xxx.vue"文件的相对路径，例如我的页面放在assets文件夹同级下的views文件夹下的“home.vue”里，那这里路径也可以写成"../assets/excel/Export2Excel"】
        const tHeader = [
          "订单编号",
          "订单 数量",
          "大客户专员名称",
          "单位名称",
          "创建时间",  
          "审核状态",
        ]; // 导出的excel表头名信息
        const filterVal = [
          "order_number",
          "order_quantity",
          "name",
          "company",
          "create_time",
          "order_status"
          
        ]; // 导出的excel表头字段名，需要导出表格字段名
        const list = that.excelData;
        const data = that.formatJson(filterVal, list);

        export_json_to_excel(tHeader, data, "虚拟卡订单"); // 导出的表格名称，根据需要自己命名
      });
    },
    //格式转换，直接复制即可,不需要修改什么
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },


    },

   data () {
      return {
        radioCheck: 3,
        total: 0,
        pageSize: 4,
        currentPage: 1,
        dialogFormVisible: false,
        checkData: [
           
        ],
        singlePrice:2,
        singlePrice1:1,
        totalPrices:0,
        totalPrice1:0,
        
        
      };
    },
    created(){
      this.showAll()
    }
}
</script>

<style>
*{
  text-align: center;
}


  .statusHead{
    margin: 0 auto;
    margin-top: 20px;
    max-width: 1200px;
    margin-bottom:60px;
  } 

  .radioCheck{
    text-align: left;
  }

  .el-radio {
    color: #606266;
    cursor: pointer;
    margin-right: 30px;
    text-align: left;
    width: 60px;
}

  .checkStatus{ 
        width: 200px;
        text-align: left; 
    } 
  .statusBox{
    float: left;
  } 
  .exportBtn{
    width: 100px; 
    margin-left: 220px; 
  } 

.allCheck{
  max-height: 600px;
}

.checkListS{
  max-width: 1200px;
  margin:0 auto;
}

.pagatations{
  max-width: 1200px;
  margin: 0 auto;
}

.block{
  float: right  !important;
}
</style>